<template>
  <section>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <!-- <el-form-item label="启用云上小店申请：" prop="enableOnlineSellerApply">
                    <el-radio-group v-model="form.enableOnlineSellerApply">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
          <el-form-item label="启用线下小店申请：" prop="enableSellerApply">
            <el-radio-group v-model="form.enableSellerApply">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="云上小店服务费：" prop="onlineSellerApplyMoney">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.onlineSellerApplyMoney" placeholder="" />
                </el-form-item> -->
          <el-form-item label="线下小店服务费：" prop="sellerApplyMoney">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.sellerApplyMoney" placeholder="" />
          </el-form-item>
          <el-form-item label="最小提现金额：" prop="minWithdraw">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.minWithdraw" placeholder="" />
          </el-form-item>
          <el-form-item label="提现代扣税率：" prop="withdrawRate">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.withdrawRate" placeholder="" />
          </el-form-item>
          <!-- <el-form-item label="红包与鲸豆兑换比例：" prop="coinRate">
                    1红包= <el-input type="number" size="mini" style="width:100px;" v-model="form.coinRate" placeholder="" /> 鲸豆
                </el-form-item> -->
          <!-- <el-form-item label="推广奖励红包：" prop="shareRedpacket">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.shareRedpacket" placeholder="" />
                </el-form-item> -->
          <el-form-item label="合伙人红包充值折扣：" prop="redPacketDiscountOfPartner">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.redPacketDiscountOfPartner"
              placeholder="" />
          </el-form-item>
          <el-form-item label="小店红包充值折扣：" prop="redPacketDiscountOfShop">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.redPacketDiscountOfShop"
              placeholder="" />
          </el-form-item>
          <el-form-item label="用户红包充值折扣：" prop="redPacketDiscountOfUser">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.redPacketDiscountOfUser"
              placeholder="" />
          </el-form-item>
          <el-form-item label="提现手续费比例：" prop="withdrawPremiumRate">
            <el-input type="number" size="mini" style="width:200px;" v-model="form.withdrawPremiumRate"
              placeholder="" />
          </el-form-item>

          <!-- <el-form-item label="普通用户分佣规则：" prop="saleRule">
                    <el-select class="w100 ml10" size="mini" v-model="form.saleRule" placeholder="分佣规则" clearable>
                        <el-option v-for="item in saleRuleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="线下小店分佣规则：" prop="saleRule1">
                    <el-select class="w100 ml10" size="mini" v-model="form.saleRule1" placeholder="分佣规则" clearable>
                        <el-option v-for="item in saleRuleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="云上小店分佣规则：" prop="saleRule2">
                    <el-select class="w100 ml10" size="mini" v-model="form.saleRule2" placeholder="分佣规则" clearable>
                        <el-option v-for="item in saleRuleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->



          <!-- <el-form-item label="推广佣金比例：" prop="sharePercent">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent" placeholder="" />
                </el-form-item>
                <el-form-item label="推广佣金比例(上级)：" prop="sharePercent2">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent2" placeholder="" />
                </el-form-item>
                <el-form-item label="推广佣金比例(上上级)：" prop="sharePercent3">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent3" placeholder="" />
                </el-form-item>
                <el-form-item label="推广佣金比例(上上上级)：" prop="sharePercent4">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent4" placeholder="" />
                </el-form-item>
                <el-form-item label="推广佣金比例(上上上上级)：" prop="sharePercent5">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent5" placeholder="" />
                </el-form-item>
                <el-form-item label="推广佣金比例(上上上上上级)：" prop="sharePercent6">
                    <el-input type="number" size="mini" style="width:200px;" v-model="form.sharePercent6" placeholder="" />
                </el-form-item> -->
          <el-form-item label="客服微信：" prop="kefuWeixin">
            <el-input size="mini" style="width:200px;" v-model="form.kefuWeixin" placeholder="" />
          </el-form-item>
          <el-form-item label="客服电话：" prop="kefuPhone">
            <el-input size="mini" style="width:200px;" v-model="form.kefuPhone" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客标签颜色：" prop="colorTaoke">
            <el-input size="mini" style="width:200px;" v-model="form.colorTaoke" placeholder="" />
          </el-form-item>
          <el-form-item label="京东标签颜色：" prop="colorJd">
            <el-input size="mini" style="width:200px;" v-model="form.colorJd" placeholder="" />
          </el-form-item>
          <el-form-item label="拼多多标签颜色：" prop="colorPdd">
            <el-input size="mini" style="width:200px;" v-model="form.colorPdd" placeholder="" />
          </el-form-item>
          <!-- <el-form-item label="唯品会标签颜色：" prop="colorWph">
                    <el-input size="mini" style="width:200px;" v-model="form.colorWph" placeholder="" />
                </el-form-item>
                <el-form-item label="考拉海购标签颜色：" prop="colorHaitao">
                    <el-input size="mini" style="width:200px;" v-model="form.colorHaitao" placeholder="" />
                </el-form-item> -->
          <el-form-item label="销量计算表达式：" prop="saleExpr">
            <el-input size="mini" style="width:200px;" v-model="form.saleExpr" placeholder="" />
            <p>
              销量 匹配 实际销量， 虚拟销量 匹配 虚拟销量销量
            </p>
          </el-form-item>
          <el-form-item label="淘客AppKey" prop="taokeAppKey">
            <el-input size="mini" v-model="form.taokeAppKey" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客AppSecret" prop="taokeAppSecret">
            <el-input size="mini" v-model="form.taokeAppSecret" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客PID" prop="taokePid">
            <el-input size="mini" v-model="form.taokePid" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客渠道邀请码" prop="taokeRelationInviteCode">
            <el-input size="mini" v-model="form.taokeRelationInviteCode" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客会员运营" prop="taokeSpecialInviteCode">
            <el-input size="mini" v-model="form.taokeSpecialInviteCode" placeholder="" />
          </el-form-item>
          <el-form-item label="淘客session" prop="taokeSession">
            <el-input size="mini" v-model="form.taokeSession" placeholder="" />
          </el-form-item>
          <el-form-item label="京东AppKey" prop="jdAppKey">
            <el-input size="mini" v-model="form.jdAppKey" placeholder="" />
          </el-form-item>
          <el-form-item label="京东AppSecret" prop="JdAppSecret">
            <el-input size="mini" v-model="form.JdAppSecret" placeholder="" />
          </el-form-item>
          <el-form-item label="拼多多Pid" prop="pddPid">
            <el-input size="mini" v-model="form.pddPid" placeholder="" />
          </el-form-item>
          <el-form-item label="拼多多ClientId" prop="pddClientId">
            <el-input size="mini" v-model="form.pddClientId" placeholder="" />
          </el-form-item>
          <el-form-item label="拼多多ClientSecret" prop="pddClientSecret">
            <el-input size="mini" v-model="form.pddClientSecret" placeholder="" />
          </el-form-item>
          <el-form-item label="拼多多ClientCode" prop="pddClientCode">
            <el-input size="mini" v-model="form.pddClientCode" placeholder="" />
          </el-form-item>
          <el-form-item label="提现说明：" prop="withdrawDesc">
            <el-input size="mini" :rows="5" type="textarea" v-model="form.withdrawDesc" placeholder="" />
          </el-form-item>
          <el-form-item label="用户协议：" prop="license">
            <el-button size="mini" type="primary" @click="showHtml(1)">修改</el-button>
          </el-form-item>
          <el-form-item label="隐私策略：" prop="privacy">
            <el-button size="mini" type="primary" @click="showHtml(2)">修改</el-button>
          </el-form-item>
          <el-form-item label="签到规则：" prop="sign">
            <el-button size="mini" type="primary" @click="showHtml(5)">修改</el-button>
          </el-form-item>
          <el-form-item label="提现付费协议：" prop="withdraw">
            <el-button size="mini" type="primary" @click="showHtml(3)">修改</el-button>
          </el-form-item>
          <el-form-item label="用户购买协议：" prop="contract">
            <el-button size="mini" type="primary" @click="showHtml(4)">修改</el-button>
          </el-form-item>
          <el-form-item label="佣金结算规则：" prop="settle">
            <el-button size="mini" type="primary" @click="showHtml(6)">修改</el-button>
          </el-form-item>
          <el-form-item label="Android版本号" prop="androidVersion">
            <el-input size="mini" v-model="form.androidVersion" placeholder="" />
          </el-form-item>
          <el-form-item label="Android版本下载地址" prop="androidDownloadUrl">
            <el-input size="mini" v-model="form.androidDownloadUrl" placeholder="" />

            <el-upload :before-upload="beforePicUpload" class="upload-demo" drag action="" :multiple="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
          <el-form-item label="Android版本下载说明" prop="androidDownloadNote">
            <el-input size="mini" v-model="form.androidDownloadNote" placeholder="" type="textarea" />
          </el-form-item>
          <el-form-item label="IOS版本号" prop="iosVersion">
            <el-input size="mini" v-model="form.iosVersion" placeholder="" />
          </el-form-item>
          <el-form-item label="IOS版本下载说明" prop="iosDownloadNote">
            <el-input size="mini" v-model="form.iosDownloadNote" placeholder="" type="textarea" />
          </el-form-item>
          <el-form-item label="默认分享标题：">
            <el-input size="mini" v-model="defaultShare.title" placeholder="" />
          </el-form-item>
          <el-form-item label="默认分享简介：">
            <el-input size="mini" :rows="5" type="textarea" v-model="defaultShare.desc" placeholder="" />
          </el-form-item>
          <el-form-item label="默认分享图片：">
            <pic-sel style="float:left" v-model="defaultShare.imageUrl" />
          </el-form-item>
          <el-form-item label="名片分享标题：">
            <el-input size="mini" v-model="icardShareIndex.title" placeholder="" />
          </el-form-item>
          <el-form-item label="名片分享简介：">
            <el-input size="mini" :rows="5" type="textarea" v-model="icardShareIndex.desc" placeholder="" />
            {company_name}企业名称，{name}姓名
          </el-form-item>
          <el-form-item label="名片分享标题（无企业）：">
            <el-input size="mini" v-model="icardShareIndex2.title" placeholder="" />
          </el-form-item>
          <el-form-item label="名片分享简介（无企业）：">
            <el-input size="mini" :rows="5" type="textarea" v-model="icardShareIndex2.desc" placeholder="" />
            {name}姓名
          </el-form-item>
          <el-form-item label="礼品卡分享图片：">
            <pic-sel style="float:left" v-model="form.cardSharePic" />
          </el-form-item>
          <el-form-item label="礼品卡分享标题：">
            <el-input size="mini" v-model="form.cardShareTitle" placeholder="" />
            {name}礼品卡派卡人，{price}红包价格
          </el-form-item>
          <el-form-item label="礼品卡分享简介：">
            <el-input size="mini" :rows="5" type="textarea" v-model="form.cardShareDesc" placeholder="" />
            {name}礼品卡派卡人，{price}红包价格
          </el-form-item>
          <el-form-item label="分享海报地址（一行一个）：">
            <el-input size="mini" :rows="5" type="textarea" v-model="form.shareImgList" placeholder="" />
          </el-form-item>
          <el-form-item label="小店分享海报地址（一行一个）：">
            <el-input size="mini" :rows="5" type="textarea" v-model="form.shareImgList1" placeholder="" />
          </el-form-item>
          <el-form-item label="签到奖励规则" prop="qiandaoRule">
            <el-input size="mini" v-model="form.qiandaoRule" placeholder="" />
          </el-form-item>
          <!-- <el-form-item label="加入云上小店提醒：" prop="joinSaleText">
            <el-input size="mini" :rows="5" type="textarea" v-model="form.joinSaleText" placeholder="" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" size="mini" @click="next()" :loading="saveLoading">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-dialog title="编辑内容" :visible.sync="dialogVisible" :close-on-click-modal="false" width="900px">
      <vue-ueditor-wrap v-model="htmlContent" :config="editorConfig" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="okHtml">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import {
  config_all,
  config_save,
  uploadSubmit
} from '../../api/config';
import {
  sale_rule_all
} from '../../api/member';
export default {
  components: {
    VueUeditorWrap,
    'pic-sel': () => import('../../components/PicSel/index')
  },
  data() {
    return {
      htmlType: 0,
      dialogVisible: false,
      editorInstance: undefined,
      editorConfig: {
        // serverUrl: process.env.VUE_APP_API_BASE + 'backend/file/na/config',
        UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/'
      },
      form: {
        kefuWeixin: undefined,
        kefuPhone: undefined,
        license: undefined,
        saleExpr: undefined,
        joinSaleText: undefined,
        shareImgList1: undefined,
      },
      saveLoading: false,
      rules: {
      },
      htmlContent: "",
      loading: undefined,
      icardShareIndex: {
        title: undefined,
        desc: undefined,
      },
      icardShareIndex2: {
        title: undefined,
        desc: undefined,
      },
      defaultShare: {
        title: undefined,
        desc: undefined,
        imageUrl: undefined,
      },
      saleRuleList: [],
    }
  },
  mounted() {
  },
  created() {
    // this.getSaleRuleList();
    this.getDetail();
  },
  methods: {
    getSaleRuleList() {
      sale_rule_all().then((res) => {
        this.saleRuleList = res.data;
      }).catch((err) => {

      })
    },
    beforePicUpload(file) {
      if (file.type !== "application/vnd.android.package-archive") {
        Message({
          message: "只能上传apk格式文件",
          type: 'error',
          duration: 5 * 1000
        });
        return false
      }

      let param = new FormData();
      param.append('file', file);
      this.loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      uploadSubmit(param)
        .then(response => {
          this.loading.close();
          this.form.androidDownloadUrl = response.data.uri;
          // this.uploadForm = response.data;
          // this.uploadForm.isCurrent = true;
          // this.uploadForm.isForce = false;
          // this.step = 2;
        }).catch((e) => {
          this.loading.close();
          console.log(e)
        });

      return false
    },
    editorReady(instance) {
      let self = this
      this.editorInstance = instance;

    },
    okHtml() {
      if (this.htmlType == 1) {
        this.form.license = this.htmlContent;
      } else if (this.htmlType == 2) {
        this.form.privacy = this.htmlContent;
      } else if (this.htmlType == 3) {
        this.form.withdraw = this.htmlContent;
      } else if (this.htmlType == 4) {
        this.form.contract = this.htmlContent;
      } else if (this.htmlType == 5) {
        this.form.sign = this.htmlContent;
      } else if (this.htmlType == 6) {
        this.form.settle = this.htmlContent;
      }
      this.dialogVisible = false;
    },
    showHtml(htmlType) {
      this.htmlType = htmlType;
      if (htmlType == 1) {
        this.htmlContent = this.form.license;
      } else if (htmlType == 2) {
        this.htmlContent = this.form.privacy;
      } else if (htmlType == 3) {
        this.htmlContent = this.form.withdraw;
      } else if (htmlType == 4) {
        this.htmlContent = this.form.contract;
      } else if (htmlType == 5) {
        this.htmlContent = this.form.sign;
      } else if (htmlType == 6) {
        this.htmlContent = this.form.settle;
      }
      this.dialogVisible = true;
    },
    // addCustomButtom(editorId) {
    //     const instance = this;

    //     window.UE.registerUI('insertimage', function (editor, uiName) {
    //         return new window.UE.ui.Button({
    //             name: uiName,
    //             onclick: function () {
    //                 instance.showPicDialog = true
    //             }
    //         });
    //     })
    // },
    next() {
      const set = this.$refs;
      set["form"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.icardShareIndex) {
            this.form.icardShareIndex = JSON.stringify(this.icardShareIndex)
          } else {
            this.form.icardShareIndex = "";
          }
          if (this.icardShareIndex2) {
            this.form.icardShareIndex2 = JSON.stringify(this.icardShareIndex2)
          } else {
            this.form.icardShareIndex2 = "";
          }
          if (this.defaultShare) {
            this.form.defaultShare = JSON.stringify(this.defaultShare)
          } else {
            this.form.defaultShare = "";
          }
          config_save(this.form).then((res) => {
            this.saveLoading = false;
            this.$message.success("设置已保存");
          }).catch((err) => {
            this.saveLoading = false;
          })
        } else {
          return false;
        }
      });
    },
    getDetail() {
      config_all().then(response => {
        this.form = response.data;
        this.form.enableOnlineSellerApply = Number(this.form.enableOnlineSellerApply)
        this.form.enableSellerApply = Number(this.form.enableSellerApply);

        if (this.form.icardShareIndex) {
          this.icardShareIndex = JSON.parse(this.form.icardShareIndex)
        }
        if (this.form.icardShareIndex2) {
          this.icardShareIndex2 = JSON.parse(this.form.icardShareIndex2)
        }
        if (this.form.defaultShare) {
          this.defaultShare = JSON.parse(this.form.defaultShare)
        }

        if (!this.form.saleRule) {
          this.form.saleRule = undefined;
        }

        if (!this.form.saleRule1) {
          this.form.saleRule1 = undefined;
        }

        if (!this.form.saleRule2) {
          this.form.saleRule2 = undefined;
        }
      }).catch(() => {
      });
    }
  }
};
</script>
